<#include "/common/defaultEngine.html"/>
<@pageTheme mark="${config.optimize()?string('true', 'false')}">
<@header title="新增单范例" bodyClass="white-bg" libs=["bootstrapSelect","fileupload","selectPage","table"]/>
<div class="wrapper wrapper-content ibox-content">
<@f.form id="form-test-add"  class="form-horizontal">
    <h4 class="form-header h4"><@ctx.i18n text = "基本信息"/>&nbsp;<i class="fa-fw fa fa-star"></i></h4>                                                                                                                                        
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label class="col-sm-4 control-label"><span style="color: red; ">*</span><@ctx.i18n text = "员工编号"/>：                
               </label>
                <div class="col-sm-8">
                    <@f.input name="code"  required=true />
                </div>
            </div>
        </div>
        <div class="col-sm-6">
                <div class="form-group">
                <label class="col-sm-4 control-label"><@ctx.i18n text = "姓名"/>：        
               </label>
                <div class="col-sm-8">
                    <@f.input name="name"  />
                </div>
            </div>    
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label class="col-sm-4 control-label"><@ctx.i18n text = "邮箱"/>：                
               </label>
                <div class="col-sm-8">
                    <@f.input name="email"  />
                </div>
            </div>
        </div>
        <div class="col-sm-6">
                <div class="form-group">
                <label class="col-sm-4 control-label"><@ctx.i18n text = "头像"/>：
                </label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <@f.imageclip name="avatar"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label class="col-sm-4 control-label"><@ctx.i18n text = "电话"/>：                
               </label>
                <div class="col-sm-8">
                    <@f.input name="phone"  />
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
            <label class="col-sm-4 control-label"><@ctx.i18n text = "性别"/>：</label>
            <div class="col-sm-8">
                <select name="sex" class="form-control m-b">
                    <option value="">所有</option>
                </select>
                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 代码生成请选择字典属性</span>
            </div>
        </div>

        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label class="col-sm-4 control-label"><@ctx.i18n text = "年龄"/>：                
               </label>
                <div class="col-sm-8">
                    <@f.input name="age"  />
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
            <label class="col-sm-4 control-label"><@ctx.i18n text = "入职日期"/>：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    <input class="form-control time-input" name="joinDate"  data-type="date"   value="${(exampleTest.joinDate?string('yyyy-MM-dd'))!}" data-format="yyyy-MM-dd" type="text" />
                </div>
            </div>
        </div>

        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
        <div class="form-group">
            <label class="col-sm-4 control-label"><@ctx.i18n text = "离职日期"/>：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    <input class="form-control time-input" name="leaveDate"  data-type="date"   value="${(exampleTest.leaveDate?string('yyyy-MM-dd'))!}" data-format="yyyy-MM-dd" type="text" />
                </div>
            </div>
        </div>

        </div>
        <div class="col-sm-6">
            <div class="form-group">
            <label class="col-sm-4 control-label"><@ctx.i18n text = "归属公司"/>：</label>
            <div class="col-sm-8">
                  <@f.treeselect  name="compId"
                    boxTitle="选择归属公司" url="sys/comp/treeData?type=0" expandLevel=true  placeholder="请选择归属公司"/>
            </div>
        </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
         <div class="form-group">
            <label class="col-sm-4 control-label"><@ctx.i18n text = "归属部门"/>：</label>
            <div class="col-sm-8">
                    <@f.treeselect name="deptId" boxTitle="请选择管理地区" url="sys/dept/selectZtree" correlationId="compId" isSelectParent=true placeholder="请选择管理地区"/>
            </div>
         </div> 
        </div>
        <div class="col-sm-6">
                <div class="form-group">
                <label class="col-sm-4 control-label"><@ctx.i18n text = "地址"/>：
                </label>
                <div class="col-sm-8">
                     <@f.selectLinkage name="addr"/>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label class="col-sm-4 control-label"><@ctx.i18n text = "地址详情"/>：                
               </label>
                <div class="col-sm-8">
                    <@f.input name="addrinfo"  />
                </div>
            </div>
        </div>
        <div class="col-sm-6">
                <div class="form-group">
                <label class="col-sm-4 control-label"><@ctx.i18n text = "备注信息"/>：        
               </label>
                <div class="col-sm-8">
                    <@f.input name="remark"  />
                </div>
            </div>    
        </div>
    </div><h4 class="form-header h4"><@ctx.i18n text = "附件上传"/>&nbsp;<i class="fa-fw fa icon-cloud-upload"></i></h4>
   <div class="row">
       <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-2 control-label"><@ctx.i18n text = "图片附件上传"/>：
                </label>
                <div class="col-sm-10">
                    <@f.fileupload name="upload_img" bizType="example_test_img" isLazy=true preview="true" uploadType="image"/>
                </div>
           </div>
       </div>
    </div>
   <div class="row">
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-2 control-label"><@ctx.i18n text = "文件附件上传"/>：
                </label>
                <div class="col-sm-10">
                    <@f.fileupload name="upload_file" bizType="example_test_file" isLazy=true preview="true" uploadType="all"/>
                </div>
            </div>
        </div>
   </div>
  <h4 class="form-header h4">子表单信息</h4>
  <div class="row">
        <div class="col-xs-12">
            <@table id="bootstrap-table">
                <a class="btn btn-success" onclick="addColumn()"><i class="fa fa-plus"></i>&nbsp;<@ctx.i18n text = "新增"/></a>
                <a class="btn btn-danger" onclick="$.table.removeData()">
                    <i class="fa fa-remove"></i> <@ctx.i18n text = "删除"/>
                </a>
            </@table>
        </div>
   </div>
</@f.form>
    <div class="hr-line-dashed"></div>
    <div class="row" id="_addTab">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="opt.form.submit()"><i class="fa fa-check"></i><@ctx.i18n text = "保存"/></button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="opt.modal.closeTab()"><i class="fa fa-reply-all"></i><@ctx.i18n text = "关闭"/></button>
        </div>
    </div>
</div>
<@footer>
<script type="text/javascript">
    var prefix = baseURL + "gen/test"
    $("#form-test-add").validate({
        focusCleanup: true
    });

        var options = {
        pagination: false,
        showSearch: false,
        showRefresh: false,
        showToggle: false,
        showColumns: false,
        clickToSelect: false,
        sidePagination: "client",
        rememberSelected: false,
        columns: [{
            checkbox: true
        },
            {
                field: 'index',
                align: 'center',
                title: "序号",
                formatter: function (value, row, index) {
                    var columnIndex = opt.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                    return columnIndex + $.table.serialNumber(index);
                }
            }
                                                                                                                                                                           ,{
                field: 'workCompany',
                align: 'center',
                title: '工作公司',
                formatter: function(value, row, index) {
                                        var html = opt.common.sprintf("<input class='form-control' type='text' name='exampleTestChild[%s].workCompany' value='%s'>", index, value);
                    return html;
                                                        }
            }
                                                                         ,{
                field: 'startTime',
                align: 'center',
                title: '起始时间',
                formatter: function(value, row, index) {
                                                            var data = {"index":index,"field":"startTime","value":value};
                    return opt.template('datetime',data);
                                    }
            }
                                                                         ,{
                field: 'endTime',
                align: 'center',
                title: '辞职时间',
                formatter: function(value, row, index) {
                                                            var data = {"index":index,"field":"endTime","value":value};
                    return opt.template('datetime',data);
                                    }
            }
                                                                         ,{
                field: 'jobs',
                align: 'center',
                title: '在职岗位',
                formatter: function(value, row, index) {
                                        var html = opt.common.sprintf("<input class='form-control' type='text' name='exampleTestChild[%s].jobs' value='%s'>", index, value);
                    return html;
                                                        }
            }
                                    ]
    };
    $.table.init(options);

    function addColumn(){
        var count = $("#" + opt.table.options.id).bootstrapTable('getData').length;
        var row = {index: count + 1
                                                                                    ,workCompany:""
                                                ,startTime:""
                                                ,endTime:""
                                                ,jobs:""
                        };
        $.table.addColumn(row);
    }
        function submitHandler() {
        if (opt.validate.form()) {
            opt.operate.saveTab(prefix + "/add", $('#form-test-add').serialize());
        }
    }
</script>
</@footer>

                                                                                           
                                                 
            <script id="datetime" type="text/template">//<!--
<div>
    <input class="form-control time-input" name="exampleTestChild[{{d.index}}].{{d.field}}"  data-type="date"   value="{{d.value}}" data-format="yyyy-MM-dd" type="text"/>
</div>
//-->
</script>
        </@pageTheme>